const path = require('path')
//引入html-webpack-plugin包 简化了 HTML 文件的创建
//你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader
const HtmlWebpackPlugin = require('html-webpack-plugin') 
const { Template } = require('webpack')
module.exports = {
  //开发模式
  mode: "production",
  //入口文件
  entry: "./src/index.js",
  //出口文件
  output: {
    //创建文件夹
    path: path.resolve(__dirname, './dist'),
    //创建文件
    filename: 'bundle.js',
    clean: true,
  },
  //新建html文件
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  //设置端口 告诉 dev-server 在服务器已经启动后打开浏览器。设置其为 true 以打开你的默认浏览器。
  //在 package.json中 配置自定义命令   "serve": "webpack serve"
  devServer: {
    port: 8080,
    open: true,
  },
  //模块配置相关
  module: {
    // 模块规则（配置 loader、解析器等选项）
    rules: [
      //css配置
      { test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      //less配置
      {test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ]
      },
      //高级js语言配置
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      //图片配置 小于8kb的自动转成base64图片 大于以源文件输出
      {
        test: /\.(png|gif|jpg|jpeg)$/i,
        type: 'asset',
      },
      {//解析iconfont文件
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'font-[name][hash:6][ext]'
        }
      },
    ]
  }
}